<template>
  <div class="level-box">
    <div class="level-item" v-for="info in list" :key="info.id">
      <el-image class="icon" :src="info.icon" />
      <div>{{ info.category_name }}</div>
      <div>${{ info.category_threshold }}</div>
      <div>{{$t('page.users.merchantLevel.uploadLimt')}}{{ info.category_max_prod }}</div>
      <div>{{$t('page.users.merchantLevel.timeSize')}}365{{$t('page.users.merchantLevel.day')}}</div>
      <div>{{$t('page.users.merchantLevel.profit')}}{{ Math.ceil(info.commission_rate*100) }}%</div>
    </div>
  </div>
</template>
<script>
  export default {
    name:"MerchantLevel",
    data(){
      return {
        list:[]
      }
    },
    mounted(){
      this.getLevelData()
    },
    methods:{
      getLevelData() {
        this.$axios.get('/api/merchant/categorylist').then(res=>{
          this.list = res.data
        })
      }
    }
  }
</script>
<style scoped lang="scss">
  .level-box{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap:wrap;
    .level-item{
      width: calc(calc(100% - 60px) / 3);
      margin-right: 20px;
      margin-bottom: 20px;
      text-align: center;
      padding: 20px;
      font-size: 14px;
      color: #666666;
      border-radius: 10px;
      box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.25);
      >div{
        padding: 5px;
      }
      .icon{
        width: 50px;
        height: 50px;
      }
    }
  }

</style>
